<template>
    <div class="buygood">
        <head-top head-title="" go-back='true'></head-top>
        <section class="paysuccess">
            <ul>
                <li class="paystatus">
                    <span>支付成功</span>
                </li>
            </ul>
            <ul>
                <li class="returnselect">
                    <router-link :to="{path: 'msite'}">
                        <span>返回主页</span>
                    </router-link>
                    <router-link :to="{path: 'orderDetail'}">
                        <span>查看订单</span>
                    </router-link>
                </li>
            </ul>
        </section>
    </div>
</template>

<script>
    import {mapState, mapMutations} from 'vuex'
    import {
        msiteAddress,
    } from 'src/service/getData'
    import loading from 'src/components/common/loading'
    import {loadMore, getImgPath} from 'src/components/common/mixin'
    import headTop from 'src/components/header/head'
    import {setStore} from "../../config/mUtils";

    export default {
        data() {
            return {
                addressDetail: '',
                contact: '',
            }
        },
        created() {

            this.geohash = this.$route.query.geohash;
            userId = this.userInfo.id;

        },
        activated() {
            this.initData();
            this.windowHeight = window.innerHeight;
        },
        mounted() {
            this.initData();
        },
        beforeDestroy() {
        },
        mixins: [loadMore, getImgPath],
        components: {
            loading,
            headTop,
        },
        computed: {
            ...mapState([
               'userInfo',
            ]),
        },
        methods: {
            ...mapMutations([

            ]),
            //初始化时获取基本数据
             async initData() {
                this.hideLoading();
            },

            //隐藏动画
            hideLoading() {
                this.showLoading = false;
            },

            goback() {
                this.$router.go(-1);
            }
        },
        watch: {
            //showLoading变化时说明组件已经获取初始化数据，在下一帧nextTick进行后续操作
            showLoading: function (value) {
                if (!value) {
                    this.$nextTick(() => {
                    })
                }
            },
            userInfo: function (value) {
                this.initData()
            },
        }
    }
</script>

<style lang="scss" scoped>
    @import 'src/style/mixin';

    @keyframes mymove {
        0% {
            transform: scale(1)
        }
        25% {
            transform: scale(.8)
        }
        50% {
            transform: scale(1.1)
        }
        75% {
            transform: scale(.9)
        }
        100% {
            transform: scale(1)
        }
    }

    @-moz-keyframes mymove {
        0% {
            transform: scale(1)
        }
        25% {
            transform: scale(.8)
        }
        50% {
            transform: scale(1.1)
        }
        75% {
            transform: scale(.9)
        }
        100% {
            transform: scale(1)
        }
    }

    @-webkit-keyframes mymove {
        0% {
            transform: scale(1)
        }
        25% {
            transform: scale(.8)
        }
        50% {
            transform: scale(1.1)
        }
        75% {
            transform: scale(.9)
        }
        100% {
            transform: scale(1)
        }
    }

    @-o-keyframes mymove {
        0% {
            transform: scale(1)
        }
        25% {
            transform: scale(.8)
        }
        50% {
            transform: scale(1.1)
        }
        75% {
            transform: scale(.9)
        }
        100% {
            transform: scale(1)
        }
    }

    .paysuccess {
        display: block;
        margin-top: 2.15em;

        ul {
            white-space: nowrap;
            padding: 0.1em;
            clear: right;
            overflow: hidden;

            li {
                display: inline-block;
                white-space: nowrap;
                width:100%;
            }
        }
    }

    .paystatus{
        height: 4em;
        background: #d8584a;
        text-align: center;
        line-height: 3.8em;
        span{
             color: white;
            vertical-align: middle;
        }

    }

    .returnselect{
        height: 2em;
        //background: #d8584a;
        text-align: center;
        span{
            color: black;
            width: 50%;
            text-align: center;
            vertical-align: middle;
            @include font(0.62em, 0.8rem, 'PingFangSC-Regular');
        }
    }

    .screen_cover {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, .3);
        z-index: 11;
    }

    .move_dot {
        position: fixed;
        bottom: 30px;
        left: 30px;

        svg {
            @include wh(.9rem, .9rem);
            fill: #3190e8;
        }
    }

    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }

    .fade-enter, .fade-leave-active {
        opacity: 0;
    }

    .fade-choose-enter-active, .fade-choose-leave-active {
        transition: opacity .5s;
    }

    .fade-choose-leave, .fade-choose-leave-active {
        display: none;
    }

    .fade-choose-enter, .fade-choose-leave-active {
        opacity: 0;
    }

    .router-slid-enter-active, .router-slid-leave-active {
        transition: all .4s;
    }

    .router-slid-enter, .router-slid-leave-active {
        transform: translate3d(2rem, 0, 0);
        opacity: 0;
    }

    .toggle-cart-enter-active, .toggle-cart-leave-active {
        transition: all .3s ease-out;
    }

    .toggle-cart-enter, .toggle-cart-leave-active {
        transform: translateY(100%);
    }

</style>
